*{
    background-color: #444444;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@keyframes loading {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(0);
    }
}
.loading{
    position: fixed;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    font-size: 0;

    }
.loading li{
    list-style: none;
    height: 20px;
    width: 20px;
    background-color: white;
    border-radius: 50%;
    float: left;
    margin-right: 20px;
    animation-name: loading;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}
.loading>ul>li:nth-child(2){
    animation-delay:0.3s ;
}
.loading>ul>li:nth-child(3){
    animation-delay:0.6s ;
    margin-right: 0;
}